<template>
  <div class="app">
    <!-- 内置的v-text指令 -->
    <h2 v-text="sum"></h2>

    <!-- 自定义指令v-big，功能和v-text类似，但要把数字放大10被后呈现出来 -->
    <h2 v-big="sum">你好</h2>

    <!-- 自定义指令v-beauty，功能和v-text类似，但要把内容变得更好看 -->
    <span v-beauty="name"></span>
  </div>
</template>

<script>
  export default {
    name:'App',
    data() {
      return {
        sum:666,
        name:'高圆圆'
      }
    },
    directives:{
      // 自定义指令本质是什么 —— 就是一个函数
      // 1.big函数何时调用？ ——  有人使用v-big指令时
      // 2.big函数常用参数？ —— element(指令所在元素)、指令对应表达式的执行结果
      // 3.big函数函数中的this是谁？ —— 爱谁谁，反正不是vm、也不是vc
      big(element,{value}){
        console.log(this)
        console.log(element,value)
        // console.log('有人使用了v-big指令')
        element.innerText += value * 10
      },
      beauty(element,{value}){
        element.innerText = value
        element.style.color = 'red'
        element.style.backgroundColor = 'yellow'
        element.style.border = '5px solid green'
      }
    }
  }
</script>

<style>
  .app {
    background-color: #ddd;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
  }
</style>